<template>
  <button @click="toggle">显示隐藏图片</button>
  <!-- 在template中，使用模型数据，无须在.value，因为它会帮助我们自动解套 -->
  <img v-show="show" alt="Vue logo" src="../assets/vue.svg" />
  <hr />
  计数器：{{ count }}
  <button @click="increment">累加</button>
</template>

<script>
// vue3的组合式Api === Composition Api
// 暂时这里不使用setup语法糖

// 规律：vue3中实现绝大部分功能都需要使用函数，而大部分函数都需要导入
import { ref } from 'vue'
export default {
  // setup函数是组件的入口函数
  // 我们定义的模型、函数、计算属性、watch、...都放里面
  /**
   * 1、它里面的this为undefined
   * 2、我们如果不使用setup语法糖，必须在该函数内容，通过返回对象的形式，把template中要用到的
   * 模型值、方法、...返回
   */
  setup () {
    console.log('---this---', this)

    // 使用ref定义两个简单的模型数据
    const show = ref(true)
    console.log('---show---', show)
    const count = ref(0)

    const toggle = () => {
      // vue3中直接可以拿到外面定义的模型数据，所以没有必要用this
      // 如果是使用ref定义的模型数据，在js中，你要访问或是更改它的值，必须通过模型.value
      show.value = !show.value
    }

    const increment = () => {
      console.log('---increment---', count)
      count.value++
    }

    return {
      show,
      count,
      toggle,
      increment
    }
  }
}
</script>
